<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="__PUBLIC__/Cms/css/role_nodeList.css?v=2018" rel="stylesheet" />
</head>
<body>
<div class="row">
    <div class="col-xs-12 col-md-12">
        <div class="widget">
            <div class="widget-header bg-blue">
                <i class="widget-icon fa fa-arrow-down"></i>
                <span class="widget-caption">功能列表</span>
                <div class="widget-buttons">
                    <a href="#" data-toggle="maximize">
                        <i class="fa fa-expand"></i>
                    </a>
                    <a href="#" data-toggle="collapse">
                        <i class="fa fa-minus"></i>
                    </a>
                    <a href="#" data-toggle="dispose">
                        <i class="fa fa-times"></i>
                    </a>
                </div>
            </div>
            <div class="widget-body">
                <div class="table-toolbar">
                    <a style="display: none" href="" class="btn btn-primary select_a" data-loader="Ystech-loader" data-loadername="新增权限">
                        <i class="fa fa-plus"></i>新增权限
                    </a>
                    <label>
                        <select name="role" onchange="roleSelect();" class="form-control input-sm role_select">
                            <volist name="roleList" id="vo">
                                <if condition="$vo.select eq 1">
                                    <option value="{$vo.id}" selected="selected">{$vo.name}</option>
                                    <else/>
                                    <option value="{$vo.id}">{$vo.name}</option>
                                </if>
                            </volist>
                        </select>
                    </label>
                    <label>
                        <select name="node" onchange="select();" class="form-control input-sm node_select">
                            <option value="">全部</option>
                            <volist name="firstNode" id="vo">
                                <if condition="$vo.select eq 1">
                                    <option value="{$vo.id}" selected="selected">{$vo.name}</option>
                                    <else/>
                                    <option value="{$vo.id}">{$vo.name}</option>
                                </if>
                            </volist>
                        </select>
                    </label>
                    <div class="pull-right">
                        <a onclick="save()" class="btn btn-sm btn-primary">保存</a>
                    </div>
                </div>
                <div class="table_box">
                    <ul>
                        <li style="background-image: linear-gradient(to bottom, #f2f2f2 0, #fafafa 100%);border-bottom: red 2px solid;padding: 10px">
                            <div class="node_th">
                                <div class="node_td" style="width: 40vw">
                                    菜单
                                    <label style="padding-left: 4px;">
                                        <input name="select_all" type="checkbox" class="colored-blue Ystech-check" value="">
                                        <span class="text"></span>
                                    </label>
                                </div>
                                <div class="node_td">类型</div>
                                <div class="node_td">读取</div>
                                <div class="node_td">修改</div>
                                <div class="node_td">管理</div>
                                <div class="node_td">编辑</div>
                            </div>
                        </li>
                        <volist name="nodeList" id="vo">
                            <li>
                                <div class="node_tr" node_id="{$vo.id}">
                                    <div class="node_td" style="width: 40vw;text-align: left">
                                        <label style="padding-left: 4px;">
                                            <input name="is_select" type="checkbox" class="colored-blue Ystech-check" value="">
                                            <span class="text"></span>
                                        </label>
                                        <span>{$vo.name}</span>
                                    </div>
                                    <div class="node_td">
                                        <span>{$vo.type_name}</span>
                                    </div>
                                    <div class="node_td">
                                        <div class="checkbox" style="margin-bottom: 0px; margin-top: 0px;">
                                            <label style="padding-left: 4px;">
                                                <input name="read" type="checkbox" class="colored-blue Ystech-check" value="">
                                                <span class="text"></span>
                                            </label>
                                        </div>
                                    </div>
                                    <div class="node_td">
                                        <div class="checkbox" style="margin-bottom: 0px; margin-top: 0px;">
                                            <label style="padding-left: 4px;">
                                                <input name="write" type="checkbox" class="colored-blue Ystech-check" value="">
                                                <span class="text"></span>
                                            </label>
                                        </div>
                                    </div>
                                    <div class="node_td">
                                        <div class="checkbox" style="margin-bottom: 0px; margin-top: 0px;">
                                            <label style="padding-left: 4px;">
                                                <input name="admin" type="checkbox" class="colored-blue Ystech-check" value="">
                                                <span class="text"></span>
                                            </label>
                                        </div>
                                    </div>
                                    <div class="node_td">
                                        <span>
                                            <a href="{:U('Cms/Role/nodeDetail/',array('id'=>$vo['id']))}" class="btn btn-success btn-xs" data-loader="Ystech-loader" data-loadername="编辑"><i class="fa fa-edit"></i> 编辑</a>&nbsp;&nbsp;
                                            <if condition="$vo.is_del eq 0">
                                                <a class="btn btn-danger btn-xs del" data-type = "del" data-id="{$vo['id']}" data-ajax="{:U('Cms/Role/embarNode/',array('id'=>$vo['id']))}"><i class="fa fa-lock"></i> 禁用</a>
                                                <else/>
                                                <a class="btn btn-blue btn-xs enabled" data-type = "del" data-id="{$vo['id']}" data-ajax="{:U('Cms/Role/enabledNode/',array('id'=>$vo['id']))}"><i class="fa fa-unlock"></i> 启用</a>
                                            </if>
                                        </span>
                                    </div>
                                </div>
                            </li>
                            <ul class="next_tr" style="display: none">
                                <volist name="vo._child" id="xvo">
                                    <li>
                                        <div class="node_tr" node_id="{$xvo.id}">
                                            <div class="node_td" style="width: 40vw;text-align: left">
                                                <label style="padding-left: 4px;">
                                                    <input name="is_select" type="checkbox" class="colored-blue Ystech-check" value="">
                                                    <span class="text"></span>
                                                </label>
                                                <span>{$xvo.name}</span>
                                            </div>
                                            <div class="node_td">
                                                <span>{$xvo.type_name}</span>
                                            </div>
                                            <div class="node_td">
                                                <div class="checkbox" style="margin-bottom: 0px; margin-top: 0px;">
                                                    <label style="padding-left: 4px;">
                                                        <input name="read" type="checkbox" class="colored-blue Ystech-check" value="">
                                                        <span class="text"></span>
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="node_td">
                                                <div class="checkbox" style="margin-bottom: 0px; margin-top: 0px;">
                                                    <label style="padding-left: 4px;">
                                                        <input name="write" type="checkbox" class="colored-blue Ystech-check" value="">
                                                        <span class="text"></span>
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="node_td">
                                                <div class="checkbox" style="margin-bottom: 0px; margin-top: 0px;">
                                                    <label style="padding-left: 4px;">
                                                        <input name="admin" type="checkbox" class="colored-blue Ystech-check" value="">
                                                        <span class="text"></span>
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="node_td">
                                        <span>
                                            <a href="{:U('Cms/Role/nodeDetail/',array('id'=>$xvo['id']))}" class="btn btn-success btn-xs" data-loader="Ystech-loader" data-loadername="编辑"><i class="fa fa-edit"></i> 编辑</a>&nbsp;&nbsp;
                                            <if condition="$xvo.is_del eq 0">
                                                <a class="btn btn-danger btn-xs del" data-type = "del" data-id="{$xvo['id']}" data-ajax="{:U('Cms/Role/embarNode/',array('id'=>$xvo['id']))}"><i class="fa fa-lock"></i> 禁用</a>
                                                <else/>
                                                <a class="btn btn-blue btn-xs enabled" data-type = "del" data-id="{$xvo['id']}" data-ajax="{:U('Cms/Role/enabledNode/',array('id'=>$xvo['id']))}"><i class="fa fa-unlock"></i> 启用</a>
                                            </if>
                                        </span>
                                            </div>
                                        </div>
                                    </li>
                                    <ul class="next_tr" style="display: none">
                                        <volist name="xvo._child" id="yvo">
                                            <li>
                                                <div class="node_tr"  node_id="{$yvo.id}">
                                                    <div class="node_td" style="width: 40vw;text-align: left">
                                                        <label style="padding-left: 4px;">
                                                            <input name="is_select" type="checkbox" class="colored-blue Ystech-check" value="">
                                                            <span class="text"></span>
                                                        </label>
                                                        <span>{$yvo.name}</span>
                                                    </div>
                                                    <div class="node_td">
                                                        <span>{$yvo.type_name}</span>
                                                    </div>
                                                    <div class="node_td">
                                                        <div class="checkbox" style="margin-bottom: 0px; margin-top: 0px;">
                                                            <label style="padding-left: 4px;">
                                                                <input name="read" type="checkbox" class="colored-blue Ystech-check" value="">
                                                                <span class="text"></span>
                                                            </label>
                                                        </div>
                                                    </div>
                                                    <div class="node_td">
                                                        <div class="checkbox" style="margin-bottom: 0px; margin-top: 0px;">
                                                            <label style="padding-left: 4px;">
                                                                <input name="write" type="checkbox" class="colored-blue Ystech-check" value="">
                                                                <span class="text"></span>
                                                            </label>
                                                        </div>
                                                    </div>
                                                    <div class="node_td">
                                                        <div class="checkbox" style="margin-bottom: 0px; margin-top: 0px;">
                                                            <label style="padding-left: 4px;">
                                                                <input name="admin" type="checkbox" class="colored-blue Ystech-check" value="">
                                                                <span class="text"></span>
                                                            </label>
                                                        </div>
                                                    </div>
                                                    <div class="node_td">
                                        <span>
                                            <a href="{:U('Cms/Role/nodeDetail/',array('id'=>$yvo['id']))}" class="btn btn-success btn-xs" data-loader="Ystech-loader" data-loadername="编辑"><i class="fa fa-edit"></i> 编辑</a>&nbsp;&nbsp;
                                            <if condition="$yvo.is_del eq 0">
                                                <a class="btn btn-danger btn-xs del" data-type = "del" data-id="{$yvo['id']}" data-ajax="{:U('Cms/Role/embarNode/',array('id'=>$yvo['id']))}"><i class="fa fa-lock"></i> 禁用</a>
                                                <else/>
                                                <a class="btn btn-blue btn-xs enabled" data-type = "del" data-id="{$yvo['id']}" data-ajax="{:U('Cms/Role/enabledNode/',array('id'=>$yvo['id']))}"><i class="fa fa-unlock"></i> 启用</a>
                                            </if>
                                        </span>
                                                    </div>
                                                </div>
                                            </li>
                                        </volist>
                                        <a href="{:U('Cms/Role/nodeDetail/',array('pid'=>$xvo['id']))}" style="text-align: center;width: 100%;text-align: center" class="btn" data-loader="Ystech-loader" data-loadername="新增权限">
                                            <i class="fa fa-plus"></i>新增功能
                                        </a>
                                    </ul>
                                </volist>
                                <a href="{:U('Cms/Role/nodeDetail/',array('pid'=>$vo['id']))}" style="text-align: center;width: 100%;text-align: center" class="btn" data-loader="Ystech-loader" data-loadername="新增功能">
                                    <i class="fa fa-plus"></i>新增功能
                                </a>
                            </ul>
                        </volist>
                        <a href="{:U('Cms/Role/nodeDetail/',array('pid'=>0))}" style="text-align: center;width: 100%;text-align: center" class="btn" data-loader="Ystech-loader" data-loadername="新增权限">
                            <i class="fa fa-plus"></i>新增功能
                        </a>

                    </ul>

                </div>
            </div>

        </div>
    </div>
</div>
<!--面包屑导航封装-->
<div id="tmpbread" style="display: none;">{$breadhtml}</div>
<script type="text/javascript">
    setBread($('#tmpbread').html());
</script>
<!--/面包屑导航封装-->
<!--全选特效封装/全部删除-->
<script type="text/javascript">
    //全选
    var checkall=$('input[type=checkbox][name=select_all]');
    var checks=$('input[type=checkbox][name=is_select]');
    $(checkall).on('click',function(){
        if($(this).is(":checked")){
            $(checks).prop("checked","checked");
        }else{
            $(checks).removeAttr("checked");
        }
    });
    function select(){
        $(".select_a").attr('href','/Cms/Role/nodeList?node='+$(".node_select").find("option:selected").val()+'&role='+$(".role_select").find("option:selected").val());
        $(".select_a").click();
    }
    $("li span").click(function(){
        $(this).parents("li").next("ul").slideToggle();
    })

    function roleSelect(){
        var role_id = $(".role_select").find("option:selected").val();
        var toajax = "{:U('Cms/Role/getRoleNodeInfo')}";
        var callok = function(data){
            removeAll();
            if (data!=null){
                for (var i=0;i<data.length;i++){
                    $(".node_tr[node_id="+data[i].node_id+"] input[name=is_select]").prop("checked","checked");
                    if (data[i].read=="1"){
                        $(".node_tr[node_id="+data[i].node_id+"] input[name=read]").prop("checked","checked");
                    }
                    if (data[i].write=="1"){
                        $(".node_tr[node_id="+data[i].node_id+"] input[name=write]").prop("checked","checked");
                    }
                    if (data[i].admin=="1"){
                        $(".node_tr[node_id="+data[i].node_id+"] input[name=admin]").prop("checked","checked");
                    }
                }
            }
            return false;
        }
        var callerr = function(){
            return false;
        }
        $.Ystech.xajax('post',toajax,{'role_id':role_id},callok,callerr);
    }

    function removeAll(){
        $("input[name=is_select]").removeAttr("checked");
        $("input[name=read]").removeAttr("checked");
        $("input[name=write]").removeAttr("checked");
        $("input[name=admin]").removeAttr("checked");
    }

    function selectAll(){
        $("input[name=is_select]").prop("checked");
        $("input[name=read]").prop("checked");
        $("input[name=write]").prop("checked");
        $("input[name=admin]").prop("checked");
    }
    $(document).ready(function(){
        roleSelect();
    })

    function save(){
        var toAjax = "{:U('Cms/Role/bindNode')}"
        var nodeList = [];
        var role_id = $(".role_select").find("option:selected").val();
        var node_id = $(".node_select").find("option:selected").val();
        $(".node_tr").each(function(){
            if ($(this).find("input[name=is_select]").is(":checked")){
                var node_id = $(this).attr("node_id");
                var read = null;
                var write = null;
                var admin = null;
                if ($(this).find("input[name=read]").is(":checked")){
                    read = "1";
                }
                if ($(this).find("input[name=write]").is(":checked")){
                    write = "1";
                }
                if ($(this).find("input[name=admin]").is(":checked")){
                    admin = "1";
                }
                nodeList.push({
                    "node_id":node_id,
                    "role_id":role_id,
                    "read":read,
                    "write":write,
                    "admin":admin
                })
            }
        });
        var data = {
            "role_id":role_id,
            "node_id":node_id,
            "node_list":nodeList
        };
        var callok = function(){
            return false;
        };
        var callerr = function(){
            return false;
        };
        $.Ystech.ajax('post',toAjax,data,callok,callerr);

    }

</script>
<!--/全选特效封装-->
</body>
</html>